<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<div class="content">
    <header>
        <h1>Manage Graders</h1>
        <div class="btn-wrapper">
            <a href="javascript:newDownloadForm()" class="btn btn-primary">Download Graders</a>
            <a href="javascript:newGraderListForm()" class="btn btn-primary">Upload Grader List</a>
            <a href="javascript:newGraderForm()" class="btn btn-primary">New Grader</a>
            <a href="javascript:editRegistrationSectionsForm()" class="btn btn-primary">Assign Registration Sections for Grading</a>
        </div>
    </header>
    {# This is a data table #}
    {% if graders[1]|length + graders[2]|length + graders[3]|length > 0 %}
        <table id="grader-table" class="table table-striped mobile-table directory-table">
            <caption>Course Graders</caption>
            <thead>
                <th>User ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>User Group</th>
                <th>Registration Sections</th>
                <th>Edit Student</th>
            </thead>
			{% for grading_group in 1..3 %}
                <tbody id="section-{{ registration }}">
                    {% if graders[grading_group]|length > 0 %}
                        <tr class="info">
                            <th class="section-break" colspan="8">{{groups[grading_group].name}}</td>
                        </tr>
                        {% for grader in graders[grading_group] %}
                            <tr id="user-{{ grader.getId() }}">
                                <td class="align-left">{{ grader.getId() }}</td>
                                <td class="align-left">{{ grader.getDisplayedFirstName() }}</td>
                                <td class="align-left">{{ grader.getDisplayedLastName() }}</td>
                                <td>{{ groups[grader.getGroup()].name }}</td>
                                <td>{{ grader.getGradingRegistrationSections()|join(", ") ?: "None" }}</td>
                                <td><a href="javascript:editUserForm('{{ grader.getId() }}');" aria-label="edit user {{grader.getDisplayedFirstName()}} {{grader.getDisplayedLastName()}}"><i class="fas fa-pencil-alt"></i></a></td>
                            </tr>
                        {% endfor %}
                    {% else %}
                        <tr class="info">
                            <td colspan="8" style="text-align: center">No {{groups[grading_group].name|replace({'Grader':'Graders'})}}</td>
                        </tr>
                    {% endif %}
                </tbody>
			{% endfor %}
        </table>
    {% else %}
        <p id="empty-table" class="warning">No graders found</p>
    {% endif %}
</div>
{% include('admin/users/UserForm.twig') %}
{% include('admin/users/GraderListForm.twig') %}
{% include('admin/users/RegistrationSectionsForm.twig') %}
{% include('admin/users/DownloadForm.twig') with { 'code': 'grader' } %}

<script>

    function fixCheckBoxes(grader_id,all_box) {

        if(all_box) {
            //update all check boxes for that user with the "all" box state
            var value = $('#' + grader_id + '_all').is(':checked');
            {% for section in reg_sections %}
                $('#' + grader_id + '_' + '{{section['sections_registration_id']}}').prop('checked', value);
            {% endfor %}
        }
        else { // if all boxes are checked, then check the 'all' box
			var all_checked = true
            {% for section in reg_sections %}
                && $('#' + grader_id + '_' + '{{section['sections_registration_id']}}').is(':checked')
            {% endfor %}
            ;
            $('#' + grader_id + '_all').prop('checked', all_checked);
        }
    }

</script>
